<template>
	<view class="tabbar-container">
		<up-tabbar :value="tarbbarStore.activeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#000" inactiveColor="#999">
			<up-tabbar-item
				v-for="item in tabbarList"
				:key="item.name"
				:name="item.name"
				:text="item.text"
				:badgeStyle="{
					top: '-6px !important',
					right: '18px !important'
				}"
				:badge="item.badge === undefined ? null : item.badge"
				@click="handleTabbarItemClick(item)"
			>
				<template #active-icon>
					<view v-if="item.isBig" class="big-icon">
						<up-icon size="56" class="u-page__item__slot-icon" :name="item.selectedIconPath"></up-icon>
					</view>
					<up-icon v-else size="28" class="u-page__item__slot-icon" :name="item.selectedIconPath"></up-icon>
				</template>
				<template #inactive-icon>
					<view v-if="item.isBig" class="big-icon">
						<up-icon size="56" class="u-page__item__slot-icon" :name="item.iconPath"></up-icon>
					</view>
					<up-icon v-else size="28" class="u-page__item__slot-icon" :name="item.iconPath"></up-icon>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
//引入pinia仓库
import { useSeekerTabbarStore } from '@/store/modules/seeker-tabbar.ts';
import { useSolverTabbarStore } from '@/store/modules/solver-tabbar.ts';
import { useUserStore } from '@/store/modules/user.ts';
import { getToken } from '@/utils/token.ts';

const userStore = useUserStore();

const tarbbarStore = userStore.userInfo.userType === 'SEEKER' ? useSeekerTabbarStore() : useSolverTabbarStore();

//tabbar数据
const tabbarList = computed(() => {
	return tarbbarStore.tabbarList;
});

//点击tabbar按钮
const handleTabbarItemClick = (item: UviewTabbarItem) => {
	// 如果需要登录才能访问
	if (item.needToken) {
		const token = getToken();
		if (!token) {
			uni.navigateTo({
				url: `/pages/login/login?path=${item.name}&type=${userStore.userInfo.userType.toLowerCase()}`
			});
			return;
		}
	}
	if (tarbbarStore.activeTab !== item.name) {
		tarbbarStore.setActiveTab(item.name);
	}
};
</script>

<style lang="scss" scoped>
.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
}

.big-icon {
	position: relative;
	top: -3px;
	box-sizing: border-box;
}
</style>
